
<template>
  <div class="container">
  <div class="header">
  <h2>物流线路列表</h2>
  <div class="searchBox">
  <input type="text" v-model="searchContent" placeholder="请输入关键词">
  <button @click="search">搜索</button>
  </div>
  <button class="addBtn" type="primary" @click="addData">添加物流线路</button>
  </div>
  <div class="tableContainer">
  <el-table :data="tableData" border style="width: 100%;">
  <el-table-column label="路线名称" prop="router_name"></el-table-column>
  <el-table-column label="途径" prop="router_way"></el-table-column>
  <el-table-column label="地址" prop="router_address"></el-table-column>
  <el-table-column label="电话" prop="router_phone"></el-table-column>
  <el-table-column label="操作" width="160">
  <template slot-scope="scope">
  <el-button size="mini" type="text" @click="treatTop(scope.index,scope.row)">置顶</el-button>
  <el-button size="mini" type="text" @click="treatEdit(scope.index,scope.row)">编辑</el-button>
  <el-button size="mini" @click="treatDelete(scope.$index, scope.row)">删除</el-button>
  </template>
  </el-table-column>
  </el-table>
  <div class="paginationContainer">
  <el-pagination :total="total" layout="prev, pager, next" background @current-change="treatCurrentChange"></el-pagination>
  </div>
  </div>
  <el-dialog :title="type" :visible.sync="dialogFormVisible">
  <el-form :model="form">
  <el-form-item label="路线名称" :label-width="formLabelWidth">
  <el-input v-model="form.router_name"></el-input>
  </el-form-item>
  <el-form-item label="途径" :label-width="formLabelWidth">
  <el-input v-model="form.router_way"></el-input>
  </el-form-item>
  <el-form-item label="地址" :label-width="formLabelWidth">
  <el-input v-model="form.router_address"></el-input>
  </el-form-item>
  <el-form-item label="电话" :label-width="formLabelWidth">
  <el-input v-model="form.router_phone"></el-input>
  </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
  <el-button @click="dialogFormVisible = false">取消</el-button>
  <el-button type="primary" @click="editData">确定</el-button>
  </div>
  </el-dialog>
  </div>
  </template>
  <script>
  export default {
  data() {
  return {
    currentPage: 1, // 当前页码
pageSize: 10, // 每页显示数量
total: 100, // 总记录数
tableData: [], // 表格数据源
  searchContent: '',
  total: 10,
  formLabelWidth: '80px',
  dialogFormVisible: false,
  type: '',
  form: {
  router_name: '',
  router_way: '',
  router_address: '',
  router_phone: ''
  },
  tableData: [{
  router_name: '北京到上海',
  router_way: '北京、天津、济南、合肥、上海',
  router_address: '北京市朝阳区南磨房路1号院',
  router_phone: '010-12345678'
  },
  {
  router_name: '北京到广州',
  router_way: '北京、郑州、武汉、长沙、深圳、广州',
  router_address: '北京市朝阳区南磨房路1号院',
  router_phone: '010-23456789'
  }
  ]
  };
  },
  methods: {
    // 处理分页变化事件
treatCurrentChange(val) {
this.currentPage = val;
this.loadData();
},
// 加载数据
loadData() {
let start = (this.currentPage - 1) * this.pageSize;
let end = start + this.pageSize;
let data = []; // 模拟表格数据
for (let i = start; i < end && i < this.total; i++) {
data.push(this.tableData[i]);
}
this.tableData = data;
},
  search() {
  if (this.searchContent) {
  //实现搜索操作，根据关键词过滤tableData
  this.tableData = this.tableData.filter(item => item.router_name.indexOf(this.searchContent) !== -1);
  this.total = this.tableData.length;
  } else {
  //不输入关键词时显示全部数据
  this.tableData = [{
  router_name: '北京到上海',
  router_way: '北京、天津、济南、合肥、上海',
  router_address: '北京市朝阳区南磨房路1号院',
  router_phone: '010-12345678'
  },
  {
  router_name: '北京到广州',
  router_way: '北京、郑州、武汉、长沙、深圳、广州',
  router_address: '北京市朝阳区南磨房路1号院',
  router_phone: '010-23456789'
  }
  ];
  this.total = 10;
  }
  },
  addData() {
  //实现添加操作，清空表单，并将dialogFormVisible设置为true，type设置为“添加”
  this.form = {
  router_name: '',
  router_way: '',
  router_address:'',
  router_phone: ''
  };
  this.dialogFormVisible = true;
  this.type = "添加";
  },
  editData() {
  if (this.type === '添加') {
  //添加操作，将表单数据push到tableData中
  this.tableData.push(this.form);
  this.total += 1;
  } else if (this.type === '编辑') {
  //编辑操作，更新tableData中相应的数据
  this.tableData.splice(this.currentIndex, 1, this.form);
  }
  this.dialogFormVisible = false;
  },
  treatTop(index, row) {
  //实现置顶操作
  this.tableData.splice(index, 1);
  this.tableData.unshift(row);
  },
  treatEdit(index, row) {
  //实现编辑操作，将表格中相应的数据赋值到form中，并将dialogFormVisible设置为true，type设置为“编辑”，记录当前编辑的数据索引currentIndex。
  this.form = Object.assign({}, row);
  this.dialogFormVisible = true;
  this.type = "编辑";
  this.currentIndex = index;
  },
  treatDelete(index, row) {
  //实现删除操作，从tableData中删除相应的数据
  this.tableData.splice(index, 1);
  },
  
},
mounted() {
this.loadData();
},
}
</script>
<style>
.container {
width: 100%;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
}

.header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}

.searchBox {
display: flex;
}

.searchBox input[type="text"] {
width: 200px;
height: 28px;
padding: 0 10px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px 0 0 4px;
}

.searchBox button {
width: 80px;
height: 30px;
background-color: #409EFF;
color: #fff;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
}

.tableContainer {
width: 100%;
}

.paginationContainer {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}

.dialog-footer {
padding: 10px 20px;
text-align: right;
box-sizing: border-box;
}
</style>